<template>
  <el-card>
    <!-- 待审批查询 -->
    <el-form :inline="true" :model="approvalSearch" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="approvalSearch.meetSub" placeholder="会议主题" clearable />
      </el-form-item>
      <el-form-item>
        <el-input v-model="approvalSearch.meetName" placeholder="会议室名称" clearable />
      </el-form-item>

      <el-form-item>
        <el-date-picker v-model="approvalSearch.meetDate" type="date" placeholder="选择会议日期" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="SearchMeet">查询</el-button>
        <el-button type="primary" plain @click="SearchMeetIsNull">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table ref="multipleTableRef" :data="tableData" row-key="id" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" :selectable="selectable" width="55" />
      <el-table-column property="meetRoomname" label="会议室" />
      <el-table-column property="meetName" label="会议主题" />
      <el-table-column property="meetName" label="支持人" />
      <el-table-column property="meetStartedTime" label="开始时间" />
      <el-table-column property="meetEndTime" label="结束时间" />
      <el-table-column property="meetName" label="参会人数" />
      <el-table-column property="createTime" label="提交时间" />
      <el-table-column property="" label="操作">
        <template #default="scope">
          <el-button type="primary" @click="handleApproval(scope.row)">会议审批</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 审批弹窗 -->
  <el-dialog v-model="ApprovalDialogVisible" title="会议详情" width="600" align-center>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <span>
        <h3>基本信息</h3>
      </span>
      <el-row>
        <el-col :span="12">
          <el-form-item label="会议主题">
            <span>项目总结大会</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主持人">
            <span>李帅</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="会议室">
            <span>办公楼大会议室</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="位置">
            <span>办公楼-606</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12"></el-col>
        <el-col :span="12"></el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="会议时间">
            <span>2025-01-08 09:30:00 ~ 11:30:00</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="会议时长">
            <span>120分钟</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="会议内容">
            <span>针对已完成的职业病危害控制效果评价和现状评价项目，对项目开展过程中所遇到的问题及解决方式、现阶段存在的问题、专家审查意见、修改完成情况等内容进行广泛交流，吸取教训，总结经验。</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="参会人">
            <span>
              <el-tag v-for="item in items" type="primary"round>{{ item.label }}</el-tag>
            </span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="创建人">
            <span>李帅</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="提交时间">
            <span>{{ moment().format("yyyy-MM-DD HH:mm:ss") }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <span>
        <h3>会议审批</h3>
      </span>
      <el-form-item label="审批结果:">
        <el-button-group>
          <el-button :type="buttontype.y" @click="pass">待审批</el-button>
          <el-button :type="buttontype.n" @click="nopass">已审批</el-button>
        </el-button-group>
      </el-form-item>
      <el-form-item label="审批说明" prop="name">
        <el-input v-model="form.approvalDesc" />
      </el-form-item>


    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="ApprovalDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="">确定</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import type { TableInstance } from 'element-plus'
import moment from 'moment'
import { no } from 'element-plus/es/locales.mjs'

//  待审批查询条件
const approvalSearch = ref({
  meetSub: '',
  meetName: '',
  meetDate: '',

})
// 查询待审批会议
const SearchMeet = () => {

}
//重置查询条件
const SearchMeetIsNull = () => {
  approvalSearch.value.meetSub = ''
  approvalSearch.value.meetName = ''
  approvalSearch.value.meetDate = ''
}
//#region 表格相关
//  是否可选
const selectable = (row: Meet) => ![1, 2].includes(row.meetId)

interface Meet {
  meetId: number,
  meetRoomname: string,
  meetName: string,
  host: string,
  meetStartedTime: string,
  meetEndTime: string,
  createTime: string,
  ispass: boolean,
  approvalDesc:string,
}
const meetForm = reactive<Meet>({
  meetId: 0,
  meetRoomname: '',
  meetName: '',
  host: '',
  meetStartedTime: '',
  meetEndTime: '',
  createTime: '',
  ispass: false,
  approvalDesc:''

})

const form=reactive({
  meetId: 0,
  meetRoomname: '',
  meetName: '',
  host: '',
  meetStartedTime: '',
  meetEndTime: '',
  createTime: '',
  ispass: false,
  approvalDesc:''
})

//表格数据
const tableData = ref([
  {
    meetId: 0,
    meetRoomname: '',
    meetName: '',
    host: '',
    meetStartedTime: '',
    meetEndTime: '',
    createTime: '',
    ispass: false,
  },
])
// 获取表格数据
const LoadTableData = () => {

}


const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<Meet[]>([])
//多选
const handleSelectionChange = (val: Meet[]) => {
  multipleSelection.value = val
}



//#endregion

//#region 弹窗相关
const ApprovalDialogVisible = ref(false)

// 会议审批弹框显示
const handleApproval = (data: any) => {
  ApprovalDialogVisible.value = true
  form.meetId  = data.meetId
  form.meetRoomname = data.meetRoomname
  form.meetName = data.meetName
  form.host = data.host
  form.meetStartedTime = data.meetStartedTime
  form.meetEndTime = data.meetEndTime
  form.createTime = data.createTime
  form.ispass = data.ispass
  form.approvalDesc = data.approvalDesc

}
const buttontype = ref({
  y: 'primary',
  n: ''
})
// 审批按钮
const pass = () => {
  meetForm.ispass = true
  buttontype.value.y = 'primary'
  buttontype.value.n = ''
}
const nopass = () => {
  meetForm.ispass = false
  buttontype.value.y = ''
  buttontype.value.n = 'primary'
}

//#endregion



const items = ref([
  {label: '张三' },
  {label: '李四' },
  {label: '王五' },
  {label: '赵六' },
  {label: '孙琦' },
  {label: '赵大' },
  {label: '钱二' },
  {label: '郑七' },
  {label: '冯九' },
  {label: '陈十' },
])


//生命周期函数钩
onMounted(() => {
  LoadTableData()
})
</script>